<template>
  <!-- font-weight设置文本粗细，默认400，没有单位 -->
  <div id="home" style="flex: 1; text-align:center; font-size: 40px; font-weight: 600;"  >
    <div style="position:relative; margin-top:160px;">
      <span style=" margin-left: 60px; float:left;">仓库管理系统</span><br/><br/>
      <div class="form-container">
        <el-form :model="loginInfo" status-icon label-width="100px" class="demo-ruleForm">
          <el-form-item label="用户名">
            <el-input v-model="loginInfo.userName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="pass">
            <el-input id="pass" type="password" v-model="loginInfo.password" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="userLogin()">登录</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import user from '@/api/user';
export default {
  name:'Home',
  props:['login'],
  data(){
    return {
      loginInfo:{
        userName:'',
        password:''
      }
    }
  },
  methods:{
    userLogin(){
      let loginUserDto = {
        userName:this.loginInfo.userName,
        userPwd:this.loginInfo.password
      }
      user.getLoginUser(loginUserDto).then(
          response => {
            console.log('用户登录响应数据：', response)
            let resCode = response.data.code
            let resMsg = response.data.message
            let userId = 0
            let userAccount = ''
            if(resCode == "200") {
              //响应成功，数据返回
              // this.userName = response.data.data.user_name
              // this.password = response.data.data.user_pwd
              let userTicket = response.data.data.user_ticket
              userId = response.data.data.id
              userAccount = response.data.data.user_account
              let ticket = {
                token:userTicket,
                expireTime:Date.now() + 3600 * 1000 * 24 * 14
              }
              //将登录凭证保存到游览器本地存储中
              localStorage.setItem('ticket', JSON.stringify(ticket))
              // this.$bus.$emit('userInfo', userId, userAccount)
              // console.log('$emit...', this.$bus.$emit)
              /*
              设置状态为未登录（父组件向子组件传递函数，
              子组件执行父组件函数，并将子组件数据到父组件）
              */
              this.$props.login(true)
            } else {
              //异常提示
              this.$message({
                  type: 'error',
                  message: resMsg
              })
            }
          },
          error => {
            console.error('请求用户列表异常，异常信息：', error)
          }
        )
    }
  }
}
</script>

<style scoped>
  /* .form-container {
    display: flex;
    justify-content: center;
    align-items: center;
  } */
  /* .el-form-item__label{
    text-align: left;
  } */
    /* body, html {
      margin: 0;
      padding: 0;
      height: 100%;
    }
   body{
    background-image: url('../assets/wms_index.png'); 
    height: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
   } */
    
   #home{
    background-image: url(../assets/wms_index.png); /* 背景图片路径 */
    background-size: cover; /* 背景图片覆盖整个元素 */
    background-position: center; /* 背景图片居中 */
    position: fixed; /* 固定位置 */
    top: 0; /* 顶部对齐 */
    left: 0; /* 左边对齐 */
    width: 100vw; /* 宽度为视口宽度 */
    height: 100vh; /* 高度为视口高度 */
    z-index: -1; /* 确保背景在其他内容下方 */
   }
</style>